<template>
  <div class="success-outer">
    <div class="success">
      <div class="buy-succ-box clearfix">
        <div class="goods-content">
          <div class="goods-img">
            <img
              src="//c1.mifile.cn/f/i/17/static/success.png"
              width="64"
              height="64" />
          </div>
          <div class="goods-info">
            <h3>已成功加入购物车！</h3>
            <span class="name">
              {{ goodsMsg }}
              <!---->
            </span>
          </div>
        </div>
        <div class="actions">
          <p class="hide">有商品未成功加入购物车，可以在购物车中查看</p>
          <a
            @click="goBack"
            href="javascript:;"
            class="btn btn-line-gray"
            style="margin-right: 15px">
            返回上一级
          </a>
          <a
            @click="goCart"
            class="btn btn-primary">
            去购物车结算
          </a>
        </div>
      </div>
      <Recommend></Recommend>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import Recommend from '@/components/recommend/index.vue'
const router = useRouter()

const goodsMsg = ref<string>(sessionStorage.getItem('goodsMsg') || '')

const goBack = () => {
  router.back()
}
const goCart = () => {
  router.replace('cart')
}
</script>

<style lang="less" scoped>
.success-outer {
  background-color: #f5f5f5;
  padding: 38px 0;
  .success {
    width: 1226px;
    margin: 0 auto;
    .buy-succ-box {
      margin-bottom: 26px;
      padding: 0 0 28px 0;
      height: 68px;
      border-bottom: 1px solid #e0e0e0;
      .goods-content {
        float: left;
        .goods-img {
          float: left;
          width: 64px;
          height: 64px;
        }
        .goods-info {
          float: left;
          margin-left: 20px;
          h3 {
            margin: 0;
            color: #424242;
            font-size: 24px;
            font-weight: 400;
            margin-top: 3px;
          }
          .name {
            margin-right: 15px;
            font-size: 14px;
            color: #757575;
          }
        }
      }
      .actions {
        float: right;
        .hide {
          display: none;
          text-align: right;
          color: red;
          margin: 0;
          font-size: 12px;
        }
        .btn {
          width: 180px;
          margin-left: 12px;
          margin-top: 5px;
          display: inline-block;
          height: 38px;
          padding: 0;
          margin: 0;
          border: 1px solid #b0b0b0;
          font-size: 14px;
          line-height: 38px;
          text-align: center;
          color: #b0b0b0;
          cursor: pointer;
          transition: all 0.4s;
        }
        .btn-line-gray {
          border-color: #b0b0b0;
          color: #b0b0b0;
          &:hover {
            color: #757575;
            background: #fff;
          }
        }
        .btn-primary {
          background: #ff6700;
          border-color: #ff6700;
          color: #fff;
          &:hover {
            background: #f25807;
            border-color: #f25807;
          }
        }
      }
    }
  }
}
</style>
